<template>
	<div class="head">
		<div class="heder hidden-sm hidden-xs">
			<div class="cont">
					<div class="cont_left">
						<a href="/"><img src="../../assets/home/logo.jpg"></a>
					</div>
					<div class="cont_right">
						<a class="lognding" href="">登录</a>
						<ul>
							<router-link 
							v-for="item in navList"
							tag="li" active-class="active" :to="item.path"
							>
								<span>{{item.name}}</span>
							</router-link>

							
						</ul>
						
					</div>
				</div>
			</div>
		
		<div class="heder hidden-lg hidden-md">
			<div class="cunt">
				<a href="/"><img src="../../assets/home/logo.jpg"></a>
				<i class="fa fa fa-remove" v-if="isShow" @click="changeShow()"></i>
				<i class="fa fa-bars" v-else @click="changeShow()"></i>
				
			</div>
		</div>
		
		<div class="layer hidden-lg hidden-md" v-show="isShow" ></div>
		<transition name="fade">
			<div class="content hidden-lg hidden-md" v-show="isShow">
				<ul>
					<router-link 
					v-for="item in navList"
					tag="li" active-class="active" :to="item.path"
					>
						<span>{{item.name}}</span>
					</router-link>
			 
				</ul>
			</div>
		</transition>	
		

	</div>
	
</template>
<script>
	export default{
		name:'footer',
		data(){
			return{
				isShow:false,
				navList:[
					{
						path:'/layout',
						name:'首页'
					},
					{
						path:'/weChatTicket',
						name:'微信售票机'
					},
					{
						path:'/project',
						name:'解决方案'
					},
					{
						path:'/AboutUs',
						name:'关于我们'
					},
					{
						path:'/helpCenter',
						name:'帮助中心'
					} 
				]
			}
			
		   

		},
		methods:{
			changeShow:function(){
				this.isShow=!this.isShow
			}
		}
	}
</script>
<style scoped>
	
	@media only screen and (min-width: 1000px){
		.heder{
			width: 100%;
			background-color: #424242;
		}
		.cont{
			width: 1000px;
			margin: 0 auto;
			height: 64px;
		}
		.cont .cont_left{
			display: inline-block;
		}
		.cont .cont_right{
			float: right;
		}
		.cont .cont_right ul{
			float: right;
			padding: 0;
			margin: 0;
		}
		.cont .cont_right .lognding{
			display: inline-block;
			height:32px;
			padding: 0 20px;
			background-color: #00ade6;
			color: #fff;
			font-size: 16px;
			border-radius:30px;
			line-height: 32px;
			float: right;
			margin-top: 15px;
		}
		.cont .cont_right li{
			float:left;
			margin-right:50px;
			cursor: pointer;
			
		}
		.cont .cont_right li.active{
			border-bottom:6px solid #00ade6;  
		}
		.cont .cont_right li.active span{
			color:#00ade6;
		}
		.cont .cont_right li span{
			color:#fff;
			font-size: 16px;
			line-height: 59px;
		}
	}

	@media only screen and (min-width: 320px) and (max-width: 768px) {
		.head{
			width: 100%;
			height: 45px;	
		}
		.heder{
			width: 100%;
			background-color: #424242;
			position: fixed;
			z-index: 101;
			left: 0;
			top: 0;
		}
		.cunt{
			width: 100%;
			height: 45px;
			padding: 0 10px;
		}
		.cunt  a{
			display: inline-block;

		}
		.cunt  a img{
			width: 50%;
			margin-top:8px;
		}
		.cunt  i{
			display: inline-block;
			float: right;
			font-size: 24px;
			color: #fff;
			margin-top: 10px;
		}
		.layer{
			position: fixed;
			background-color: #000;
			z-index: 100;
			width: 100%;
			height: 100%;
			opacity: 0.3;
			left: 0;
			top: 0;
		}
		.content{
			position: fixed;
			z-index:101;
			width: 100%;
			margin-top: 45px;
			background-color: #fff;
			padding: 30px 0;
		}
		.content ul li{
			width: 100%;
			height: 40px;
			font-size: 14px;
			padding-top:6px; 
			
		}
	
		.content ul li span{
			height: 28px;
			display: block;
			padding:0 15px;
			line-height: 28px;
		}
		.content ul li.active span{
			border-left:3px solid #00ade6;
		}
		.fade-enter-active, .fade-leave-active {
		  transition: opacity .5s
		}
		.fade-enter, .fade-leave-to {
		  opacity: 0
		}


	}


</style>